<template>
	<view class="">
		<view class="verify">
			<span>为保障你的账户安全，请先进行身份验证，</span>
			<span>短信验证码发送至</span>
			<view class="verify_mobile">{{ phone }}</view>
			<!-- 输入验证码 -->
			<view class="verify_num">
				<input type="text" placeholder-class="place" v-model="code" placeholder-style="color:#b4b4b4;font-siez:28upx" placeholder="输入短信验证码" />
				<view :class="['verify_num_djs', !flag ? 'noclick' : '']" @click="change">
					<span class="getcode" v-if="flag">点击获取验证码</span>
					<span v-else>{{ time }}s后重新获取</span>
				</view>
			</view>
			<!-- 确定按钮 -->
			<bu-tton class="true" @toalert="toalert">确认</bu-tton>
		</view>
		<navigation></navigation>
	</view>
</template>

<script>
import buTton from '../../components/mine/button.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: { buTton, navigation },
	data() {
		return {
			flag: true,
			time: 5,
			phone: '',
			code: ''
		};
	},
	onLoad(options) {
		this.phone = options.phone;
	},
	methods: {
		change() {
			clearInterval(timer);
			this.flag = false;
			var timer = setInterval(() => {
				this.time--;
				if (this.time == 0) {
					this.flag = true;
					this.time = 5;
					clearInterval(timer);
				}
			}, 1000);
		},
		// 验证手机号
		toalert() {
			this.ajax('user/checkOlMobile', {
				data: {
					mobile: this.phone,
					code: this.code
				},
				success: res => {
					if (res.code) {
						uni.navigateTo({
							url: '/pageA/settings/alertmobile'
						});
					} else {
						this.toast(res.msg);
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.true {
	margin-top: 60upx;
	font-size: 32upx;
}
.verify {
	width: 100%;
	height: 310upx;
	background-color: #ffffff;
	padding: 30upx;
	box-sizing: border-box;
	span {
		text-align: center;
		display: block;
		font-size: 28upx;
		color: #b4b4b4;
		line-height: 40upx;
	}
	.verify_mobile {
		color: #333333;
		font-size: 32upx;
		font-weight: bold;
		text-align: center;
		margin-top: 20upx;
	}
}
.verify_num {
	margin-top: 50upx;
	width: 100%;
	height: 100upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.verify_num_djs {
		color: #999999;
		width: 220upx;
		// padding-left: 30upx;
		border-left: 2upx solid #e1e1e1;
		.getcode {
			color: #8530e8;
		}
		span {
			font-size: 28upx;
			text-align: right;
		}
	}
	.noclick {
		pointer-events: none;
	}
}
</style>
<style>
page {
	background-color: #f2f2f2;
}
</style>
